/* eslint-disable no-undef */
/* eslint-disable no-unused-vars */
let { ajax } = require('./ajax.js');
let all = document.querySelector('.all');
let ul = document.querySelector('ul');
let urlList;
const baseUrl =
    'https://service-dmsf9bxc-1251395798.gz.apigw.tencentcs.com/release';
ajax({
    baseUrl,
    url: '/api/web/carouselGroup/getAllCarouselGroup?projectId=6',
    method: 'GET',
    data: {},
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
    callback: (e) => {
        let data = e.data.rows[0].w_carousels;
        urlList = data.map((o) => {
            let url;
            for (const key in o) {
                if (key === 'url') url = o[key];
            }
            return url;
        });
        Data();
        listen();
        function Data() {
            urlList.forEach((v, i) => {
                ul = document.getElementsByTagName('ul');
                //ul+=`<li data-i='${i}'></li>`//???????????????????
                all.innerHTML += `<img src=${v} data-i=${i} >`;
            });
        }
    },
});

function listen() {
    let now = (last = 0);
    let img = document.querySelectorAll('img');
    all.addEventListener('click', () => {
        if (event.target.localName == 'p' && event.target.dataset.i == '0') {
            //向左
            img[last].style['z-index'] = '0';
            if (--last < 0) now = last + img.length;
            else now = last;
            img[now].style['z-index'] = '1';
            last = now;
        }
        if (event.target.localName == 'p' && event.target.dataset.i == '1') {
            //向右
            img[last].style['z-index'] = '0';
            if (++last > img.length) now = last - img.length;
            else now = last;
            img[now].style['z-index'] = '1';
            last = now;
        }
    });
}
